<template>
  <div class="main">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <!-- 左上角 -->
    <div id="leftshang"
         style="width: 350px;height:400px; overflow-y:auto;backgroundColor: #044060">
      <el-timeline style="margin-left:-34px">
        <div id="child1"
             class="child">
          <el-timeline-item v-for="item in notice"
                            :key="item.id"
                            placement="top"
                            color="red"
                            style="height:120px">
            <h4 style="margin-top:-10px;height:0px;color:#fff">
              {{ item.user }} 发布于 {{ item.fabu_time }}
            </h4>
            <el-card style="height:110px">
              <h4 style="height:0px;margin-top:-10px">
                {{ item.title }}
              </h4>
              <p style="margin-top:30px">内容：{{ item.content }}</p>
            </el-card>
          </el-timeline-item>
        </div>
        <div id="child2"
             class="child"></div>
      </el-timeline>
    </div>
    <!-- 中间地图 -->
    <div id="mainmap"
         class="container">
      <div class="mychart"
           id="mychart"></div>
    </div>

    <!-- 左下角 -->
    <div id="leftxia"></div>
    <!-- 中间下面 -->
    <div id="zhongxia">
      <el-table class="el-table__body-wrapper"
                :data="tableData"
                height="280"
                border
                :header-cell-style="{ backgroundColor: '#044060', color: '#ffffff' }"
                :cell-style="{
          padding: '0px 0',
          backgroundColor: '#044060',
          color: '#ffffff'
        }">
        >
        <el-table-column label="车牌号"
                         width="90"
                         prop="car_number">
        </el-table-column>
        <el-table-column label="Etc名称"
                         prop="etcname"> </el-table-column>
        <el-table-column label="档案库区域"
                         prop="area_name1"></el-table-column>
        <el-table-column label="身份证"
                         prop="idcard"> </el-table-column>
        <el-table-column label="操作"
                         width="80">
          <template slot-scope="scope">
            <el-button style="height:30px"
                       size="mini"
                       @click="seeTaopai(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 右上角 -->
    <div id="rightshang"></div>

    <!-- 右下角 -->
    <div id="rightxia"></div>
  </div>
</template>

<script>
import { getcarDocument, getcardataCount, getTaoPaiChe, getNotice, zuoxiadata } from '@/api/home'
import { getTablelist } from '@/utils/TimeUtils'
// import MyHeader from './header.vue'
export default {
  name: 'home',
  components: {
    // MyHeader: MyHeader
  },
  data () {
    return {
      rightshang_data1: [],
      rightshang_data2: [],
      time: '',
      rightshang_data3: [100, 100, 100, 100, 100, 100],
      rightshang_data4: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],

      rightxia_datax: [],
      rightxia_datay1: [],
      rightxia_datay2: [],

      tableData: [],
      bloading: false,
      // 滚动的表格数据赋值
      tableData1: [],
      i: 0,

      // 左上角发布公告
      notice: [],

      // 坐下角数据
      zuoxia1: [],
      zuoxai2: [],
      zuoxia3: []
    }
  },
  computed: {},
  methods: {
    // 公告滚动效果
    gundong () {
      var parent = document.getElementById('leftshang')
      var child1 = document.getElementById('child1')
      var child2 = document.getElementById('child2')
      child2.innerHTML = child1.innerHTML
      setInterval(function () {
        if (parent.scrollTop >= child1.scrollHeight) {
          parent.scrollTop = 0
        } else {
          parent.scrollTop++
        }
      }, 20)
    },

    // 左下角
    zuoxia () {
      var myCharts3 = this.$echarts.init(document.getElementById('leftxia'))
      myCharts3.setOption({
        backgroundColor: '#044060',
        title: {
          // text: "业务分布图",
          x: 'right',
          textStyle: {
            color: '#ffffff',
            fontSize: '12'
          }
        },
        // 工具栏组件
        toolbox: {
          show: true, // 是否显示
          feature: {
            // 要显示的具体功能
            dataView: {
              // 数据视图
              show: true
            },
            saveAsImage: {
              // 保存图片
              show: true
            }
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: '#ffffff',
            fontSize: '12'
          },
          data: this.zuoxia2
        },
        color: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple'],
        series: [
          {
            name: '访问量',
            type: 'pie',
            radius: '70%',
            label: {
              normal: {
                show: true,
                position: 'right',
                textStyle: {
                  color: '#ffffff',
                  fontSize: '12'
                }
              }
            },
            data: this.zuoxia3
          }
        ]
      })
    },

    rightshang () {
      var myChart = this.$echarts.init(document.getElementById('rightshang'))
      // myChart.setOption(option);
      var myColor = [
        '#d0570e',
        '#d0a00e',
        '#34da62',
        '#00e9db',
        '#00c0e9',
        '#0096f3',
        '#33CCFF',
        '#33FFCC'
      ]
      myChart.setOption({
        backgroundColor: '#044060',
        grid: {
          left: '6%',
          top: '15%',
          right: '4%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [
          {
            show: false
          }
        ],
        yAxis: [
          {
            axisTick: 'none',
            axisLine: 'none',
            offset: '20',
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontSize: '14'
              }
            },
            data: this.rightshang_data1
          },
          {
            axisTick: 'none',
            axisLine: 'none',
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontSize: '0'
              }
            },
            data: [8, 7, 6, 5, 4, 3, 2, 1]
          },
          {
            name: '车辆档案数据',
            nameGap: '15',
            nameTextStyle: {
              color: '#ffffff',
              fontSize: '18'
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(0,0,0,0)'
              }
            },
            data: []
          }
        ],
        series: [
          {
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: this.rightshang_data2,
            label: {
              normal: {
                show: true,
                position: 'right',
                textStyle: {
                  color: '#ffffff',
                  fontSize: '14'
                }
              }
            },
            barWidth: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  var num = myColor.length
                  return myColor[params.dataIndex % num]
                }
              }
            },
            z: 2
          },
          {
            name: '白框',
            type: 'bar',
            yAxisIndex: 1,
            barGap: '-100%',
            data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
            barWidth: 20,
            itemStyle: {
              normal: {
                color: '#0e2147',
                barBorderRadius: 5
              }
            },
            z: 1
          },
          {
            name: '外框',
            type: 'bar',
            yAxisIndex: 2,
            barGap: '-100%',
            data: [100, 100, 100, 100, 100, 100, 100, 100],
            barWidth: 10,
            itemStyle: {
              normal: {
                color: function (params) {
                  var num = myColor.length
                  return myColor[params.dataIndex % num]
                },
                barBorderRadius: 5
              }
            },
            z: 0
          },
          {
            name: '外圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0, 0, 0, 0, 0, 0, 0, 0],
            yAxisIndex: 2,
            symbolSize: 25,
            itemStyle: {
              normal: {
                color: function (params) {
                  var num = myColor.length
                  return myColor[params.dataIndex % num]
                },
                opacity: 1
              }
            },
            z: 2
          }
        ]
      })
    },
    // 右下角地图
    rightxiaMap () {
      var myChart1 = this.$echarts.init(document.getElementById('rightxia'))
      myChart1.setOption({
        backgroundColor: '#044060',
        color: ['#33CCFF', '#d0a00e'],
        title: {
          text: 'Etc、卡口车辆数据统计',
          top: 10,
          left: 10,
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        toolbox: {
          show: true,
          top: 10,
          right: 10,
          feature: {
            mark: { show: true },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        grid: {
          top: 60,
          right: 70,
          bottom: 30,
          left: 60
        },
        legend: {
          top: 32,
          left: 'center',
          data: ['Etc车辆数据', '卡口车辆数据'],
          textStyle: {
            color: '#ffffff'
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            // data: ['排水', '供水', '燃气', '热力', '通信', '电力', '工业', '广播', '其他']
            data: this.rightxia_datax,
            axisLabel: {
              // 调整左侧Y轴刻度， 直接按对应数据显示
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Etc\n车\n辆\n数\n据\n',
            nameLocation: 'center',
            nameGap: 35,
            nameRotate: 0,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },

            nameTextStyle: {
              fontSize: 16,
              color: '#ffffff'
            },
            // 默认以千分位显示，不想用的可以在这加一段
            axisLabel: {
              // 调整左侧Y轴刻度， 直接按对应数据显示
              show: true,
              showMinLabel: true,
              showMaxLabel: true,
              formatter: function (value) {
                return value
              },
              textStyle: {
                color: '#ffffff'
              }
            }
          },
          {
            type: 'value',
            name: '卡\n口\n车\n辆\n数\n据\n',
            nameLocation: 'center',
            nameGap: 50,
            nameRotate: 0,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            nameTextStyle: {
              fontSize: 16,
              color: '#ffffff'
            },
            // 默认以千分位显示，不想用的可以在这加一段
            axisLabel: {
              // 调整左侧Y轴刻度， 直接按对应数据显示
              show: true,
              showMinLabel: true,
              showMaxLabel: true,
              formatter: function (value) {
                return value
              },
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: 'Etc车辆数据',
            type: 'bar',
            yAxisIndex: 0,
            // data: [409.07, 187.48, 94.86, 161.11, 327.68, 355.9, 0.56, 49.86, 0.56],
            data: this.rightxia_datay2,
            // itemStyle: { normal: { label: { show: true } } },
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            }
          },
          {
            name: '卡口车辆数据',
            type: 'bar',
            yAxisIndex: 1,
            data: this.rightxia_datay1,

            // data: [18447, 7800, 2843, 6547, 15170, 26569, 506, 1873, 542],
            // itemStyle : { normal: {label : {show: true}}},
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            }
          }
        ]
      })
    },

    myMap () {
      // 基于准备好的dom，初始化echarts实例
      let mychart = this.$echarts.init(document.getElementById('mychart'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        mychart.resize()
      })
      // 绘制图表
      mychart.setOption({
        backgroundColor: '#044060',
        // 图表主标题
        title: {
          // 文本
          text: '青海省',
          // 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          top: 10,
          // 值: 'left', 'center', 'right' 同上
          left: 'center',
          // 文本样式
          textStyle: {
            // 字体大小
            fontSize: 25,
            // 字体粗细
            fontWeight: 650,
            // 字体颜色
            color: '#fff'
          }
        },
        // 提示框组件
        tooltip: {
          // 触发类型, 数据项图形触发
          trigger: 'item',
          // 使用函数模板，传入的数据值 ——> value: number | Array
          formatter: function (val) {
            return val.data.name + '<br>人口数量: ' + val.data.value + '人'
          }
        },
        // 视觉映射组件
        visualMap: {
          // continuous 类型为连续型
          type: 'continuous',
          show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
          // 指定 visualMapContinuous 组件的允许的最小/大值 min/max 必须用户指定
          min: 0,
          // min,max 形成了视觉映射的定义域
          max: 10000,

          // 文本样式
          textStyle: {
            // 字体大小
            fontSize: 15,
            // 字体颜色
            color: '#fff'
          },
          // 拖拽时，是否实时更新
          realtime: false,
          // 是否显示拖拽用的手柄
          calculable: true,
          // 定义在选中范围中的视觉元素
          inRange: {
            // 图元的颜色
            color: [
              '#9fb5ea',
              '#e6ac53',
              '#74e2ca',
              '#85daef',
              '#9feaa5',
              '#5475f5',
              'lightskyblue',
              'orangered'
            ]
          }
        },
        series: [
          {
            // 类型
            type: 'map',
            // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
            map: '青海',
            // 地图类型
            mapType: 'province',
            // 是否开启鼠标缩放和平移漫游 默认不开启
            // 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
            roam: true,
            // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
            top: 60,
            // 图形上的文本标签
            label: {
              show: false // 是否显示对应地名
            },
            // 地图区域的多边形 图形样式
            itemStyle: {
              // 地图区域的颜色 如果设置了visualMap, 这个属性将不起作用
              areaColor: '#7B68EE',
              // 描边线宽 为 0 时无描边
              borderWidth: 0.5,
              // 图形的描边颜色 支持的颜色格式同 color
              borderColor: '#000',
              // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
              borderType: 'solid'
            },
            // 高亮状态
            emphasis: {
              // 文本标签
              label: {
                // 是否显示标签
                show: true,
                // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
                color: '#fff'
              },
              // 图形样式
              itemStyle: {
                // 地图区域的颜色
                areaColor: '#FF6347'
              }
            },
            // 地图系列中的数据内容数组，数组项可以为单个数值
            data: [
              { name: '西宁市', value: 10000, lng: 101.778916, lat: 36.623178 },
              {
                name: '海西蒙古族藏族自治州',
                value: 19000,
                lng: 97.370785,
                lat: 37.374663
              },
              {
                name: '海北藏族自治州',
                value: 3200,
                lng: 100.901059,
                lat: 36.959435
              },
              { name: '海东市', value: 2400, lng: 102.10327, lat: 36.502916 },
              {
                name: '黄南藏族自治州',
                value: 19000,
                lng: 102.019988,
                lat: 35.517744
              },
              {
                name: '海南藏族自治州',
                value: 1800,
                lng: 100.619542,
                lat: 36.280353
              },
              {
                name: '玉树藏族自治州',
                value: 1800,
                lng: 97.008522,
                lat: 33.004049
              },
              {
                name: '果洛藏族自治州',
                value: 1800,
                lng: 100.619542,
                lat: 36.280353
              }
            ]
          }
        ]
      })
      // 定时显示提示框和高亮效果
      let index = -1
      setInterval(function () {
        // 隐藏提示框
        mychart.dispatchAction({
          type: 'hideTip',
          seriesIndex: 0,
          dataIndex: index
        })
        // 显示提示框
        mychart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index + 1
        })
        // 取消高亮指定的数据图形
        mychart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index
        })
        // 高亮指定的数据图形
        mychart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: index + 1
        })
      }, 2000)
    },
    getMap () { },

    // 表格滚动效果
    begin () {
      this.bloading = true
      var result = getTablelist(this.tableData1, this.i)
      this.tableData.unshift(result)
      this.tableMove()
      this.a = setInterval(() => {
        this.tableMove()
        if (this.i > this.tableData1.length) {
          this.pause()
        }
        this.i++
      }, 2000)
    },
    pause () {
      clearInterval(this.a)
      this.bloading = false
    },
    reset () {
      this.pause()
      setTimeout(() => {
        this.tableData = []
      }, 1000)
    },
    tableMove () {
      // 48px 为表格行高
      let t = document.getElementsByClassName('el-table__body-wrapper')
      setTimeout(() => {
        // this.tableData.splice(4, 1);
        // t[0].style.transition = "all .7s";
        // t[0].style.marginTop = "0px";
        // this.i = this.i++;
      }, 500)
      setTimeout(() => {
        if (this.i > this.tableData1.length) {
          this.pause()
        }
        // this.i = this.i + 1;
        this.tableData.unshift(getTablelist(this.tableData1, this.i))
        t[0].style.transition = 'all 0s ease 0s'
        t[0].style.marginTop = '0'
      }, 1000)
    },

    // 带参数跳转到套牌车列表页面
    seeTaopai (e) {
      this.$router.push('/sys/taopaiche?car_number=' + e.car_number)
    }
  },

  mounted () {
    // 左下角饼图
    setTimeout(() => {
      this.zuoxia()
    }, 600)

    // 左上角滚动效果
    setTimeout(() => {
      this.gundong()
    }, 600)

    var params = {
      time: this.time
    }
    getcarDocument('/home/cardocumentCount', params).then(res => {
      if (res.code === 200) {
        for (var i = 0; i < res.data.length; i++) {
          this.rightshang_data1.push(res.data[i].area_name)
          this.rightshang_data2.push(res.data[i].cnt)
        }
      } else if (res.code === 500) {
        this.$message(res.data)
      }
    })

    this.myMap()
    setTimeout(() => {
      this.rightxiaMap()
    }, 400)
    setTimeout(() => {
      this.rightshang()
    }, 800)
  },
  created () {
    // 左下角饼图业务统计接口
    zuoxiadata('/home/zuoxia').then(res => {
      if (res.code === 200) {
        this.zuoxia3 = res.data
        for (var i = 0; i < res.data.length; i++) {
          this.zuoxia1.push(res.data[i].name)
        }
      } else if (res.code === 500) {
        this.$message(res.data)
      }
    })

    // 发布公告列表
    getNotice('/system/getNotice').then(res => {
      if (res.code === 200) {
        this.notice = res.data
      } else if (res.code === 500) {
        this.$message(res.data)
      }
    })

    // 车辆数据统计
    getcardataCount('/home/cardataCount').then(res => {
      if (res.code === 200) {
        for (var i = 0; i < res.data.length; i++) {
          var area_name = res.data[i].area_name
          this.rightxia_datax.push(area_name.slice(0, 2))
          this.rightxia_datay1.push(res.data[i].cnt)
          this.rightxia_datay2.push(res.data[i].etccnt)
        }
      } else if (res.code === 500) {
        this.$message(res.data)
      }
    })

    // 套牌车表格
    getTaoPaiChe('/moxing/getAlltaopai').then(res => {
      if (res.code === 200) {
        this.tableData1 = res.data
      } else if (res.code === 500) {
        this.$message(res.data)
      }
    })

    // 滚动开始
    this.begin()
  }
}
</script>

<style scoped>
* {
  // border: 1px solid red;
  height: 535px;
}
.container {
  margin-left: 350px;
  margin-top: -400px;
}
.container .mychart {
  width: 555px;
  height: 400px;
  border: 1px solid #aeaeae;
  /* background: url(static/bgImg.png) no-repeat 100% 100%; */
}

#leftxia {
  height: 280px;
  width: 330px;
  border: 1px solid blue;
  margin-top: -130px;
}
#rightshang {
  float: right;
  margin-top: -680px;
  width: 550px;
  height: 315px;
}
#rightxia {
  float: right;
  width: 550px;
  height: 360px;
  margin-top: -360px;
}
#zhongxia {
  height: 280px;
  width: 575px;
  margin-left: 334px;
  margin-top: -284px;
  display: flex;
}

/*左上角通知*/
.child {
  height: auto;
}

.el-table .success-row {
  background: #044060;
}
</style>
